<template>
  <q-page class="university-detail-page">
    <div class="banner-section">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <div class="university-logo">
          <q-img
            :src="university.logo"
            spinner-color="white"
            style="height: 100px; max-width: 100px"
          />
        </div>
        <h1 class="university-name">{{ university.name }}</h1>
        <p class="university-location">
          <q-icon name="location_on" /> {{ university.location }}
        </p>
      </div>
    </div>

    <div class="content-container q-pa-md">
      <div class="row q-col-gutter-md">
        <div class="col-12 col-md-8">
          <q-card class="q-mb-md">
            <q-card-section>
              <div class="text-h6">学校简介</div>
              <p class="university-description">
                {{ university.description }}
              </p>
            </q-card-section>
          </q-card>

          <q-card class="q-mb-md">
            <q-card-section>
              <div class="text-h6">院系设置</div>
              <div class="row q-col-gutter-sm q-mt-md">
                <div 
                  class="col-12 col-sm-6 col-md-4" 
                  v-for="department in university.departments" 
                  :key="department"
                >
                  <q-chip 
                    clickable
                    color="primary" 
                    text-color="white"
                  >
                    {{ department }}
                  </q-chip>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <q-card class="q-mb-md">
            <q-card-section>
              <div class="text-h6">招生信息</div>
              <q-markup-table separator="cell" class="q-mt-md">
                <thead>
                  <tr>
                    <th>年份</th>
                    <th>录取人数</th>
                    <th>平均分</th>
                    <th>最低分</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="record in university.admissionRecords" :key="record.year">
                    <td>{{ record.year }}</td>
                    <td>{{ record.enrolled }}</td>
                    <td>{{ record.averageScore }}</td>
                    <td>{{ record.minScore }}</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </q-card-section>
          </q-card>
        </div>

        <div class="col-12 col-md-4">
          <q-card class="q-mb-md">
            <q-card-section>
              <div class="text-h6">基本信息</div>
              <div class="info-item q-mt-md">
                <strong>创办时间:</strong> {{ university.founded }}
              </div>
              <div class="info-item">
                <strong>学校类型:</strong> {{ university.type }}
              </div>
              <div class="info-item">
                <strong>学校属性:</strong> {{ university.attributes.join(', ') }}
              </div>
              <div class="info-item">
                <strong>学生人数:</strong> {{ university.studentCount }}
              </div>
              <div class="info-item">
                <strong>教师人数:</strong> {{ university.facultyCount }}
              </div>
            </q-card-section>
          </q-card>

          <q-card class="q-mb-md">
            <q-card-section>
              <div class="text-h6">联系方式</div>
              <div class="info-item q-mt-md">
                <strong>地址:</strong> {{ university.address }}
              </div>
              <div class="info-item">
                <strong>电话:</strong> {{ university.phone }}
              </div>
              <div class="info-item">
                <strong>官网:</strong> 
                <a :href="university.website" target="_blank">{{ university.website }}</a>
              </div>
            </q-card-section>
          </q-card>

          <q-card>
            <q-card-section>
              <div class="text-h6">校园风光</div>
              <div class="q-mt-md">
                <q-img
                  :src="university.campusImage"
                  spinner-color="primary"
                  style="height: 200px"
                  rounded
                />
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

// 获取路由参数
const route = useRoute()
const universityId = route.params.id

// 大学详细信息
const university = ref({
  id: 1,
  name: '清华大学',
  location: '北京市',
  logo: 'https://upload.wikimedia.org/wikipedia/commons/9/94/THU_main_building.jpg',
  description: '清华大学是中国著名的综合性大学，成立于1911年，位于北京市海淀区清华园。学校以工科和理科著称，在国际上享有很高的学术声誉。清华大学秉承"自强不息，厚德载物"的校训，培养了大批杰出人才，为国家发展做出了重要贡献。',
  founded: '1911年',
  type: '综合类',
  attributes: ['985工程', '211工程', '双一流'],
  studentCount: '约50,000人',
  facultyCount: '约3,000人',
  address: '北京市海淀区清华园1号',
  phone: '010-62781056',
  website: 'https://www.tsinghua.edu.cn',
  campusImage: 'https://www.tsinghua.edu.cn/__local/3/19/4A/7102C453874F665740603C87595_74752F51_23116.jpg',
  departments: [
    '建筑学院', '土木水利学院', '机械工程学院', '电子工程系', 
    '计算机科学与技术系', '经济管理学院', '理学院', '材料学院',
    '人文学院', '社会科学学院', '法学院', '医学院'
  ],
  admissionRecords: [
    { year: '2023', enrolled: 3800, averageScore: 690, minScore: 670 },
    { year: '2022', enrolled: 3700, averageScore: 685, minScore: 665 },
    { year: '2021', enrolled: 3600, averageScore: 680, minScore: 660 }
  ]
})

// 在实际应用中，这里会根据 universityId 从后端获取数据
onMounted(() => {
  console.log('加载大学详情，ID:', universityId)
})
</script>

<style lang="scss" scoped>
.university-detail-page {
  .banner-section {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
                url('https://www.tsinghua.edu.cn/__local/3/19/4A/7102C453874F665740603C87595_74752F51_23116.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 20px;
    text-align: center;
    
    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    
    .banner-content {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      
      .university-logo {
        margin: 0 auto 20px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        padding: 5px;
      }
      
      .university-name {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: 1px;
      }
      
      .university-location {
        font-size: 1.2rem;
        opacity: 0.9;
      }
    }
  }
  
  .content-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .university-description {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
  }
  
  .info-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    a {
      color: var(--q-primary);
      text-decoration: none;
      font-weight: 500;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .q-chip {
    width: 100%;
    justify-content: center;
    border-radius: 8px;
  }
  
  .q-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: none;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(33, 150, 243, 0.2);
    }
  }
  
  @media (max-width: $breakpoint-xs-max) {
    .banner-section {
      padding: 60px 15px;
      
      .university-name {
        font-size: 2rem;
      }
    }
  }
}
</style>